class AppConfig extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            appConfigTypes: [],
            list: [''],
            isParent: false,
            inputValues: {
                id: '',
                mame: '',
                type: '',
                content: '',
                deviceType: '',
                description: ''
            }
        };
        this.pageCount = 0;
    }

    componentDidMount() {
        this.verify = {
            name: function (value) {
                if (value.length < 2) {
                    return '类型名称至少得2个字符!';
                }
            },
            type: function (value) {
                let ret = /^[a-zA-Z-]+$/;
                if (!ret.test(value)) {
                    return '类型Key只能是英文或者横线！';
                }
            }
        };
        this.queryAppConfigTypes();
    }

    queryAppConfigTypes() {
        postJson("/appConfig/type/queryAppConfigTypeAll.x", {
            deviceType: this.refs.deviceType.value
        }, (data) => {
            console.log("data", data);
            this.setState({
                appConfigTypes: data.data
            }, () => {
                this.refs.table.refresh();
            });
        })
    }

    /* custom functions */
    updateList(page, pageSize) {
        let params = {};
        params.page = page;
        params.pageSize = pageSize;
        params.deviceType = this.refs.deviceType.value;
        postJson("/appConfig/info/queryAppConfigInfoPage.x", params, (data) => {
            console.log("data", data);
            let list = data.data.list;
            this.pageCount = data.data.size;
            this.setState({
                list: list
            });
        })
    }

    search() {
        this.refs.table.refresh();
    }

    addAppConfigType() {
        this.refs.modal_add.show();
    }

    btnSubmit() {
        let content = [];
        let appConfigTypes = this.state.appConfigTypes;
        for (let i in appConfigTypes) {
            content.push({
                typeName: appConfigTypes[i].typeName,
                typeKey: appConfigTypes[i].typeKey,
                valueName: this.refs[appConfigTypes[i].typeKey].value ? this.refs[appConfigTypes[i].typeKey].text : '没有配置',
                typeValue: this.refs[appConfigTypes[i].typeKey].value
            });
        }
        this.state.inputValues.content = JSON.stringify(content);
        this.state.inputValues.deviceType = this.refs.deviceType.value;
        postJson("/appConfig/info/saveAppConfigInfo.x", this.state.inputValues, () => {
            layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加成功', {icon: 6});
            this.refs.table.refresh();
            this.refs.modal_add.close();
        });
    }

    edit(type) {
        this.state.inputValues = {
            id: type.id,
            name: type.name,
            type: type.type,
            content: type.content,
            deviceType: type.deviceType,
            description: type.description
        };
        this.refs.modal_add.show();
        this.setState({});
    }

    delete(id) {
        layui.layer.confirm('确定要删除该条目?删除之后此条目将无法被选中!', (index) => {
            postJson("/appConfig/info/deleteAppConfigInfo.x", {
                    id: id
                },
                () => {
                    this.refs.table.refresh();
                    layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除成功', {icon: 6});
                });
            layui.layer.close(index);
        });
    }

    endCallback() {
        this.setState({
            inputValues: {
                id: '',
                mame: '',
                type: '',
                content: '',
                deviceType: '',
                description: ''
            }
        });
    }

    inputChange(type, value) {
        this.state.inputValues[type] = value;
        this.setState({});
    }

    render() {
        return (
            <Frame header="APP配置信息" headerBtns={
                <SecurityCheck roles="admin">
                    <HeaderBtn onClick={() => this.addAppConfigType()}><i className="fa fa-plus"/>&nbsp;
                        新增类型</HeaderBtn>
                </SecurityCheck>
            }
            >
                <Form type="pane">
                    <Item>
                        <Label>设备类型</Label>
                        <Select name="deviceType" ref="deviceType" onChange={(data) => this.queryAppConfigTypes()}>
                            <option value="outdoor">门口机</option>
                            <option value="indoor">室内机</option>
                            <option value="mobile">手机</option>
                        </Select>
                    </Item>
                    <Table ref="table" count={this.pageCount}
                           pageOnClick={(page, pageSize) => this.updateList(page, pageSize)}>
                        <colgroup>
                            <col width="150"/>
                            <col width="150"/>
                            <col width="120"/>
                            <col/>
                            <col/>
                            <col width="60"/>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>配置名称</th>
                            <th>配置类型</th>
                            <th>更新时间</th>
                            <th>配置内容</th>
                            <th>描述</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {

                            this.state.list.map((array) => {
                                return <tr>
                                    <td>{array.name}</td>
                                    <td>{array.type}</td>
                                    <td>{array.updateTime}</td>
                                    <td>
                                        <Table className="layui-table" lay-even lay-skin="nob">
                                            <colgroup>
                                                <col width="60"/>
                                                <col width="200"/>
                                            </colgroup>
                                            <tbody>
                                            {array.content ? JSON.parse(array.content).map((content) => {
                                                return <tr>
                                                    <td style={{
                                                        padding: '5px 0px',
                                                        float: 'right',
                                                        fontWeight: 'bold'
                                                    }}>{content.typeName}：
                                                    </td>
                                                    <td style={{
                                                        padding: '5px 0px'
                                                    }}>
                                                        <div>【{content.valueName}】{content.typeValue}</div>
                                                    </td>
                                                </tr>
                                            }) : ''}
                                            </tbody>
                                        </Table>

                                    </td>
                                    <td>{array.description}</td>
                                    <td>
                                        <SecurityCheck roles="admin">
                                            <Button size="xs"
                                                    onClick={() => this.edit(array)}>编辑</Button>
                                            <Button size="xs" btnType="danger"
                                                    onClick={() => this.delete(array.id)}>删除</Button>
                                        </SecurityCheck>
                                    </td>
                                </tr>
                            })
                        }
                        </tbody>
                    </Table>

                    <Modal
                        title="添加配置"
                        ref="modal_add"
                        endCallback={() => this.endCallback()}>
                        <Form type="pane" size="sm" verify={() => {
                            return this.verify;
                        }}>
                            <Input type="hidden" value={this.state.inputValues.id}/>
                            <Item>
                                <Label>配置名称</Label>
                                <Input type="text"
                                       value={this.state.inputValues.name}
                                       lay-verify="name"
                                       onChange={(value) => this.inputChange('name', value)}
                                       placeholder="请输入名称"
                                />
                            </Item>

                            <Item>
                                <Label>配置类型</Label>
                                <Input type="text"
                                       value={this.state.inputValues.type}
                                       lay-verify="type"
                                       onChange={(value) => this.inputChange('type', value)}
                                       placeholder="请输入类型"
                                />
                            </Item>

                            {
                                this.state.appConfigTypes.map((appConfigType) => {
                                    let value = '';
                                    if (this.state.inputValues.content) {
                                        let content = JSON.parse(this.state.inputValues.content);
                                        for (let i in content) {
                                            if (content[i].typeKey === appConfigType.typeKey) {
                                                value = content[i].typeValue;
                                                break;
                                            }
                                        }
                                    }
                                    return <Item>
                                        <Label>{appConfigType.typeName}</Label>
                                        <Select ref={appConfigType.typeKey} value={value}>
                                            <option value="">不选择配置</option>
                                            {
                                                appConfigType.children ? appConfigType.children.map((configType) => {
                                                    console.log('configType', configType);
                                                    return <option
                                                        value={configType.typeValue}>{configType.typeName}</option>
                                                }) : ''
                                            }
                                        </Select>
                                    </Item>
                                })
                            }
                            <Item>
                                <Label>描述</Label>
                                <Input type="text"
                                       value={this.state.inputValues.description}
                                       lay-verify="description"
                                       onChange={(value) => this.inputChange('description', value)}
                                       placeholder="请输入描述"
                                />
                            </Item>

                            <Item>
                                <Button formBtn={true}
                                        size='sm'
                                        btnType='normal'
                                        lay-submit="true"
                                        onClick={() => this.btnSubmit()}>确定</Button>
                            </Item>
                        </Form>
                    </Modal>
                </Form>
            </Frame>
        )
    }
}

ReactDOM.render(
    <AppConfig/>
    , document.getElementById('root'));
